{% extends "../layouts/admin.html" %} {% block content %}
<header class="header navbar bg-white shadow">
	<div class="btn-group tool-button">
		<a class="btn btn-primary navbar-btn" href="/store/goods/index" data-pjax><i class="ti-angle-left"></i> 返回</a>
	</div>
</header>

<div class="content-wrap">
	<div class="wrapper" style="min-height:500px;">

		<form id="addForm" role="form" class="form-horizontal parsley-form" data-parsley-validate="true">
			<div class="box-tab">

				<ul class="nav nav-tabs">
					<li class="active">
						<a href="#base" data-toggle="tab" aria-expanded="true">基本信息</a>
					</li>
					<li class="">
						<a href="#detail" data-toggle="tab" aria-expanded="false">商品详情</a>
					</li>
					<li class="">
						<a href="#attribute" data-toggle="tab" aria-expanded="false">商品属性</a>
					</li>
					<li class="">
						<a href="#spec" data-toggle="tab" aria-expanded="false">规格库存</a>
					</li>
				</ul>
				<div class="tab-content">
					<section class="panel panel-form">
						<div class="row mb10">
							<div class="col-lg-12">
								<input type="hidden" id="id" name="id" value="{{goods.id}}">
								<div class="tab-pane fade  active in" id="base">
									<div class="form-group">
										<label for="name" class="col-sm-2 control-label">商品名称</label>

										<div class="col-sm-8">
											<input type="text" id="name" class="form-control" name="name" value="{{goods.name}}" data-parsley-required="true" placeholder="商品名称">
										</div>
									</div>
									<div class="form-group">
										<label for="goods_sn" class="col-sm-2 control-label">商品编号</label>

										<div class="col-sm-8">
											<input type="text" id="goods_sn" class="form-control" name="goods_sn" value="{{goods.goods_sn}}" data-parsley-required="true" placeholder="商品编号">
										</div>
									</div>
									<div class="form-group">
										<label for="goods_sn" class="col-sm-2 control-label">市场价格</label>

										<div class="col-sm-8">
											<div class="input-group">
												<input type="text" id="market_price" class="form-control" name="market_price" value="{{goods.market_price}}" data-parsley-required="true" placeholder="市场价格">
												<span class="input-group-addon">元</span>
											</div>
										</div>
									</div>

									<div class="form-group">
										<label for="retail_price" class="col-sm-2 control-label">销售价格</label>

										<div class="col-sm-8">
											<div class="input-group">
												<input type="text" id="retail_price" class="form-control" name="retail_price" value="{{goods.retail_price}}" data-parsley-required="true" placeholder="销售价格">
												<span class="input-group-addon">元</span>
											</div>
										</div>
									</div>
									<div class="form-group">
										<label for="goods_number" class="col-sm-2 control-label">库存数量</label>

										<div class="col-sm-8">

											<input type="text" id="goods_number" class="form-control" name="goods_number" value="{{goods.goods_number}}" data-parsley-required="true" placeholder="库存数量(多规格商品各规格库存数量之和将取代填写值)">

										</div>
									</div>
									<div class="form-group">
										<label for="goods_unit" class="col-sm-2 control-label">单位</label>

										<div class="col-sm-8">

											<input type="text" id="goods_unit" class="form-control" name="goods_unit" value="{{goods.goods_unit}}" data-parsley-required="true" placeholder="件/个/盒/只">

										</div>
									</div>

									<div class="form-group has-feedback">
										<label for="category_id" class="col-sm-2 control-label">商品分类</label>

										<div class="col-sm-8">
											<div class="input-group">
												<input id="categoryid" type="text" class="form-control" placeholder="选择商品分类" disabled value="{{goods.category.name}}" />

												<span class="input-group-btn">
			                             			<button type="button" class="btn btn-primary" data-toggle="modal"
                                                data-target="#dialogSelectCategory"><i class="ti-plus"></i>选择
                                        </button>
			                             		</span>
											</div>
											<input type="hidden" name="category_id" value="{{goods.category_id}}">
										</div>
									</div>
									<div class="form-group">
										<label for="brand" class="col-sm-2 control-label">品牌</label>

										<div class="col-sm-8">
											<input type="text" id="brand" class="form-control" name="brand" readonly placeholder="选择商品品牌" value="{{goods.brand.name}}">
											<input type="hidden" id="brand_id" name="brand_id" value="{{goods.brand_id}}">
										</div>
									</div>

									<div class="form-group">
										<label class="col-sm-2 control-label">主图</label>

										<div class="col-sm-8 picture-upload">
											<div id="queue1"></div>
											<div id="img1" class="view">
												{% if goods.primary_pic_url%}
												<li>
													<img src="{{goods.primary_pic_url}}" alt="" />
													<i class="ti-trash"></i>
												</li>
												{%endif%}
											</div>
											<input id="img_url" type="file" multiple="false">
											<input type="hidden" name="primary_pic_url" value="{{goods.primary_pic_url}}" />
											<div class="clearfix"></div>
										</div>

									</div>
									<div class="form-group">
										<label class="col-sm-2 control-label">图集</label>

										<div class="col-sm-8 picture-upload">
											<div id="queue2"></div>
											<div id="img2" class="view">
												{% if goods.list_pic_url%} {% for item in goods.list_pic_url | split(",")%}
												<li>
													<img src="{{item}}" alt="" />
													<i class="ti-trash"></i>
												</li>
												{%endfor%} {%endif%}
											</div>
											<input id="img_url2" type="file" multiple="true">
											<input type="hidden" name="list_pic_url" value="{{goods.list_pic_url}}" />
											<div class="clearfix"></div>
										</div>

									</div>

									<div class="form-group">
										<label for="is_new" class="col-sm-2 control-label">是否新品</label>

										<div class="col-sm-8 switcha">
											<div class="mr15">
												<input type="checkbox" id="is_new" name="is_new" class="js-switch-blue" {{'checked' if goods.is_new else ''}} hidden>
											</div>
										</div>
									</div>
									<div class="form-group">
										<label for="is_on_sale" class="col-sm-2 control-label">是否在售</label>

										<div class="col-sm-8 switcha">
											<div class="mr15">
												<input type="checkbox" id="is_on_sale" name="is_on_sale" class="js-switch-blue" {{'checked' if goods.is_on_sale else ''}} hidden>

											</div>
										</div>
									</div>
									<div class="form-group">
										<label for="is_hot" class="col-sm-2 control-label">是否热销</label>

										<div class="col-sm-8 switcha">
											<div class="mr15">
												<input type="checkbox" id="is_hot" name="is_hot" class="js-switch-blue" {{'checked' if goods.is_hot else ''}} hidden>
											</div>
										</div>
									</div>

								</div>
								<div class="tab-pane fade" id="detail">
									<div class="form-group">
										<label for="keywords" class="col-sm-2 control-label">关键词</label>

										<div class="col-sm-8">
											<input type="text" data-role="tagsinput" id="keywords" name="keywords" value="{{goods.keywords}}" class="form-control" placeholder="输入关键词" />

										</div>
									</div>

									<div class="form-group">
										<label for="digest" class="col-sm-2 control-label">描述</label>

										<div class="col-sm-8">
											<textarea name="digest" rows="5" placeholder="描述" class="form-control">{{goods.digest}}</textarea>

										</div>
									</div>

									<div class="form-group">
										<label for="content" class="col-sm-2 control-label">介绍</label>

										<div class="col-sm-8">
											<textarea id="content" name="content" style="width:100%;height:300px;">{{goods.content}}</textarea>

										</div>
									</div>

								</div>
								<div class="tab-pane fade" id="attribute">

									<div class="form-group">
										<label for="name" class="col-sm-2 control-label">商品类型</label>

										<div class="col-sm-8">
											<input type="text" id="typeName" class="form-control" name="typeName" value="{{goods.type.name}}" readonly placeholder="选择商品类型">
											<input type="text" id="type" name="type" value="{{goods.type_id}}" hidden>
										</div>
									</div>
									<div id="attribute-box">

										{% for item in goods.attribute%}

										<div class="form-group">
											<label for="attribute_{{item.attribute_id}}" class="col-sm-2 control-label">{{item.attribute.name}}</label>
											<div class="col-sm-8">
												{% if item.attribute.input_type == 1%}

												<input type="text" id="attribute_{{item.attribute_id}}" class="form-control" name="attribute_{{item.attribute_id}}" placeholder="{{item.attribute.name}}" onchange="attributeChange(this)" value="{{item.value}}"> 
												{% elif item.attribute.input_type == 2%}
												<select name="attribute_{{item.attribute_id}}" id="attribute_{{item.attribute_id}}" class="form-control" onchange="attributeChange(this)">
													{% for itm in item.attribute.values | split(",")%}
													<option value="{{itm}}" {% if itm==item.value %}selected{%endif%}>{{itm}}</option>
													{% endfor %}
												</select>

												{%endif%}

											</div>
										</div>
										{% endfor%}

									</div>

								</div>
								<div class="tab-pane fade" id="spec">
									<div class="form-group">
										<label class="col-sm-2 control-label">添加规格</label>

										<div class="col-sm-8">
											<div class="input-group">
												<span class="input-group-btn"><button class="btn btn-default" type="button" onclick="addspec()">+</button></span>
											</div>
										</div>
									</div>
									<div class="form-group">
										<label class="col-sm-2 control-label">商品规格</label>

										<div class="col-sm-8">

											<table id="specification" class="table">
												<thead>
													<tr>
														<th>规格名称</th>
														<th>规格值</th>
														<th>图片</th>
														<th>操作</th>

													</tr>
												</thead>
												<tbody>
													{% for item in goods.specification%}
													<tr>
														<td>{{item.specification.name}}</td>
														<td>{{item.value}}</td>
														<td class="img">
															{% if item.pic_url%}
															<img src="{{item.pic_url}}" alt="" /> {%endif%}
														</td>
														<td>
															<div class="btn-group">
																<button type="button" class="btn btn-default btn-xs dropdown-toggle" data-toggle="dropdown">
							<i class="ti-settings"></i> <span class="ti-angle-down"></span></button>
																<ul class="dropdown-menu" role="menu">
																	<li>
																		<a href="javascript:;" onclick="addspec(this)">编辑</a>
																	</li>
																	<li>
																		<a href="javascript:;" onclick="del(this)">删除</a>
																	</li>
																</ul>
															</div>
														</td>
													</tr>
													{%endfor%}
												</tbody>
											</table>

										</div>
									</div>
									<div class="form-group">
										<label class="col-sm-2 control-label">商品库存</label>

										<div class="col-sm-8">

											<table id="product" class="table">
												<thead>
													<tr>
														<th>商品规格</th>
														<th>库存数量</th>
														<th>价格</th>
														<th>图片</th>
														<th>操作</th>

													</tr>
												</thead>
												<tbody>

													{% for item in goods.product%}

													<tr>
														<!--<td>{{item.goods_sn}}</td>-->
														<td>

															{% for itm in item.specification_value%}

															<a class="btn btn-primary btn-xs">{{itm.value}}</a>

															{% endfor %}

														</td>
														<td>{{item.goods_number}}</td>
														<td>{{item.retail_price}}</td>
														<td>
															{% if item.pic_url%}
															<img src="{{item.pic_url}}" onclick="sublime.picture('{{item.pic_url}}')" /> {% endif%}
														</td>
														<td>
															<a href="javascript:;" onclick="setPro(this)" class="btn btn-default btn-xs">设置</a>
														</td>

													</tr>

													{% endfor %}

												</tbody>
											</table>

										</div>
									</div>

								</div>

							</div>
						</div>
					</section>
				</div>
			</div>

			<div class="col-lg-3"></div>
			<div class="col-lg-6">
				<div class="form-group text-center">
					<label></label>

					<div>
						<button class="btn btn-primary btn-block btn-lg btn-parsley" data-loading-text="正在提交..." id="formSubmit">提 交</button>
					</div>
				</div>
			</div>
		</form>

	</div>
</div>

<!-- 选择上级单位 -->
<div id="dialogSelectCategory" class="modal fade bs-modal-sm" tabindex="-1" role="dialog" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
				<h4 class="modal-title">选择商品分类</h4>
			</div>
			<div class="modal-body">
				<div class="row">
					<div class="col-xs-12">
						<div id="jsTree" class="demo"></div>
					</div>
				</div>

			</div>
			<div class="modal-footer">

				<button type="button" class="btn btn-default" data-dismiss="modal">取 消</button>
				<button type="button" class="btn btn-primary" onclick="selectMenu()">确认选择</button>
			</div>
		</div>
	</div>
</div>
<div id="dialogSelect" class="modal fade bs-modal-sm" tabindex="-3" role="dialog" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">

		</div>
	</div>
</div>
<div id="dialogSpecification" class="modal fade bs-modal-sm" tabindex="-2" role="dialog" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
				<h4 class="modal-title">添加规格</h4>
			</div>
			<div class="modal-body">
				<div class="row">
					<div class="col-xs-12 form-horizontal parsley-form">
						<div class="form-group">
							<label for="spec_id" class="col-sm-2 control-label">规格名称</label>

							<div class="col-sm-8">
								<select name="spec_id" id="spec_id" class="form-control">
									{% for item in specificationArr %}
									<option value="{{item.id}}">{{item.name}}</option>
									{% endfor %}
								</select>
							</div>
						</div>
						<div class="form-group">
							<label for="spec_value" class="col-sm-2 control-label">规格值</label>

							<div class="col-sm-8">
								<input type="text" id="spec_value" class="form-control" name="spec_value" data-parsley-required="true" placeholder="规格值">
							</div>
						</div>

						<div class="form-group">
							<label class="col-sm-2 control-label">图片</label>

							<div class="col-sm-8 picture-upload">
								<div id="queue3"></div>
								<div id="img3" class="view">
								</div>
								<input id="img_url3" type="file" multiple="false">
								<input type="hidden" name="pic_url" id="pic_url" />
								<div class="clearfix"></div>
							</div>

						</div>
					</div>
				</div>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">取 消</button>
				<button id="ok" type="button" class="btn btn-primary">确 定</button>
			</div>
		</div>
	</div>
</div>
<div id="dialogProduct" class="modal fade bs-modal-sm" tabindex="-2" role="dialog" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
				<h4 class="modal-title">设置库存</h4>
			</div>
			<div class="modal-body">
				<div class="row">
					<div class="col-xs-12 form-horizontal parsley-form">

						<div class="form-group">
							<label for="spec_value" class="col-sm-2 control-label">商品规格</label>

							<div class="col-sm-8">
								<div id="pro_spec"></div>
							</div>
						</div>
						<div class="form-group">
							<label for="pro_num" class="col-sm-2 control-label">库存数量</label>

							<div class="col-sm-8">
								<input type="text" id="pro_num" class="form-control" name="pro_num" data-parsley-required="true" placeholder="库存数量">
							</div>
						</div>
						<div class="form-group">
							<label for="pro_price" class="col-sm-2 control-label">销售价格</label>

							<div class="col-sm-8">
								<input type="text" id="pro_price" class="form-control" name="pro_price" data-parsley-required="true" placeholder="销售价格">
							</div>
						</div>
						<div class="form-group">
							<label class="col-sm-2 control-label">图片</label>

							<div class="col-sm-8 picture-upload">
								<div id="queue4"></div>
								<div id="img4" class="view">
								</div>
								<input id="img_url4" type="file" multiple="false">
								<input type="hidden" name="pro_pic_url" id="pro_pic_url" />
								<div class="clearfix"></div>
							</div>

						</div>
					</div>
				</div>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">取 消</button>
				<button id="ok" type="button" class="btn btn-primary">确 定</button>
			</div>
		</div>
	</div>
</div>
<script language="JavaScript">
	function initTreeView() {
		$("#jsTree").jstree({
			plugins: ["wholerow", "json_data"],
			core: {
				data: {
					dataType: "json",
					url: function(node) {
						return node.id === "#" ? "/store/category/tree" : "/store/category/tree?pid=" + node.id
					}
				},
				multiple: false
			}
		}).on("dblclick.jstree", function(node) {
			selectMenu();
		});
	}
	//选择父分类
	function selectMenu() {
		var tree = $.jstree.reference("#jsTree");
		var node = tree.get_selected(true)[0];
		var txt = node.text;
		var category = node.id;
		var level = node.original.level;

		for(var i = 1; i < level; i++) {
			if(node.parent) {
				node = tree.get_node(node.parent);
				txt = node.text + " > " + txt;
			}
		}
		$("#addForm #categoryid").val(txt);
		$("#addForm input[name='category_id']").val(category);

		$("#dialogSelectCategory").modal("hide");
	}

	var type_id = "{{goods.type_id}}";

	$("#dialogSelect").on("hidden.bs.modal", function() {
		$(this).removeData("bs.modal");

		var type = $("#type").val();

		if(type != type_id) {

			$.post("/store/attribute/type", {
				type_id: type
			}, function(data) {
				console.log(data);
				var html = "";
				for(var i = 0; i < data.length; i++) {
					if(data[i].input_type == 1) {
						html += '<div class="form-group">' +
							'<label for="attribute_' + data[i].id + '" class="col-sm-2 control-label">' + data[i].name + '</label>' +

							'<div class="col-sm-8">' +

							'<input type="text" id="attribute_' + data[i].id + '" class="form-control" name="attribute_' + data[i].id + '" placeholder="' + data[i].name + '" onchange="attributeChange(this)">' +

							'</div>' +
							'</div>';
					}
					else if(data[i].input_type == 2) {

						var options = "<option value=''>请选择</option>";
						var values = data[i].values.split(",");
						for(var x = 0; x < values.length; x++) {
							options += '<option value="' + values[x] + '">' + values[x] + '</option>';
						};

						html += '<div class="form-group">' +
							'<label for="attribute_' + data[i].id + '" class="col-sm-2 control-label">' + data[i].name + '</label>' +

							'<div class="col-sm-8">' +

							'<select name="attribute_' + data[i].id + '" id="attribute_' + data[i].id + '" class="form-control"  onchange="attributeChange(this)">' +
							options +
							'</select>' +

							'</div>' +
							'</div>';
					}

				}
				console.log(html);
				$("#attribute-box").html(html);

			}, "json");

		}

	});
	var attribute = {{ goods.attribute | stringify | safe }};

	function attributeChange(t) {
		var v = $(t).val();
		var id = $(t).attr("id").split("_")[1];
		var att = {
			attribute_id: id,
			value: v
		};
		var flag = false;
		for(var i = 0; i < attribute.length; i++) {
			if(attribute[i].attribute_id == id) {
				flag = true;
				break;
			}

		}
		if(flag) {
			for(var i = 0; i < attribute.length; i++) {
				if(attribute[i].attribute_id == id) {
					attribute[i].value = v;
					break;
				}

			}
		} else {
			attribute.push(att);
		}

	}

	$("#brand").on("click", function() {

		$("#dialogSelect").modal({
			remote: "/store/brand/select"
		});
	});

	$("#typeName").on("click", function() {
		type_id = $("#type").val();
		$("#dialogSelect").modal({
			remote: "/store/type/select"
		});
	});

	$(document).ready(function() {

		myForm.init();
		initTreeView();

		$("#formSubmit").click(function() {
			var btn = $(this);
			
			$("#addForm").validate({
				submitHandler: function(form) {
					var data = $('#addForm').serializeJSON();
					data.specification = JSON.stringify(specification);
					data.attribute = JSON.stringify(attribute);
					data.product = JSON.stringify(product);
					
					btn.button("loading");
					$.post("/store/goods/edit", data, function(res) {
						if(res.errno == 0) {
							Toast.success(res.data);
							//刷新父级菜单
							//form.resetForm();
						}
						else {
							Toast.error(res.errmsg);
						}
						btn.button("reset");
					});

				}
			});

		});

	});

	function delImg(t) {
		$(t).parent().remove();
	}

	$(function() {
		var ue = new baidu.editor.ui.Editor({
			serverUrl: "/open/ueditor/store"
		});
		ue.render('content');
		$('#img_url').uploadifive({
			'auto': true,
			'multi': false,
			'width': '100%',
			'fileObjName': 'picture',
			'buttonText': '<i class="ti-plus"></i>',
			'fileType': 'image/*',
			'fileSizeLimit': 1024,
			'queueSizeLimit': 1,
			'formData': {},
			'queueID': 'queue1',
			"removeCompleted": true,
			'uploadScript': '/store/picture/upload',
			'onUploadComplete': function(file, data) {
				data = JSON.parse(data);
				console.log(data)
				if(data.errno == 0) {
					Toast.success("上传成功");

					var html = "<li><img src='" + data.data[0].url + "'/><i class='ti-trash'  onclick=\"delImg(this)\"></i></li>"

					$("#img1").html(html);
					$("[name='primary_pic_url']").val(data.data[0].url);

				}
				else {
					Toast.error(data.errmsg);
				}
			},
			'onSelect': function(queue) {}
		});

		$('#img_url2').uploadifive({
			'auto': true,
			'multi': true,
			'width': '100%',
			"removeCompleted": true,
			'fileObjName': 'picture',
			'buttonText': '<i class="ti-plus"></i>',
			'fileType': 'image/*',
			'fileSizeLimit': 500,
			'queueSizeLimit': 6,
			'formData': {},
			'queueID': 'queue2',
			'uploadScript': '/store/picture/upload',
			'onUploadComplete': function(file, data) {
				data = JSON.parse(data);
				console.log(data)
				if(data.errno == 0) {
					Toast.success("上传成功");

					var html = "<li><img src='" + data.data[0].url + "'/><i class='ti-trash'  onclick=\"delImg(this)\"></i></li>"

					$("#img2").append(html);
					var pic_url = $("[name='list_pic_url']").val();

					$("[name='list_pic_url']").val(pic_url ? pic_url + "," + data.data[0].url : data.data[0].url);

				}
				else {
					Toast.error(data.errmsg);
				}
			},
			'onSelect': function(queue) {}
		});
		$('#img_url3').uploadifive({
			'auto': true,
			'multi': false,
			'width': '100%',
			'fileObjName': 'picture',
			'buttonText': '<i class="ti-plus"></i>',
			'fileType': 'image/*',
			'fileSizeLimit': 1024,
			'queueSizeLimit': 1,
			'formData': {},
			'queueID': 'queue3',
			"removeCompleted": true,
			'uploadScript': '/store/picture/upload',
			'onUploadComplete': function(file, data) {
				data = JSON.parse(data);
				console.log(data)
				if(data.errno == 0) {
					Toast.success("上传成功");

					var html = "<li><img src='" + data.data[0].url + "'/><i class='ti-trash'  onclick=\"delImg(this)\"></i></li>"

					$("#img3").html(html);
					$("[name='pic_url']").val(data.data[0].url);

				}
				else {
					Toast.error(data.errmsg);
				}
			},
			'onSelect': function(queue) {}
		});

		$('#img_url4').uploadifive({
			'auto': true,
			'multi': false,
			'width': '100%',
			'fileObjName': 'picture',
			'buttonText': '<i class="ti-plus"></i>',
			'fileType': 'image/*',
			'fileSizeLimit': 1024,
			'queueSizeLimit': 1,
			'formData': {},
			'queueID': 'queue4',
			"removeCompleted": true,
			'uploadScript': '/store/picture/upload',
			'onUploadComplete': function(file, data) {
				data = JSON.parse(data);
				console.log(data)
				if(data.errno == 0) {
					Toast.success("上传成功");

					var html = "<li><img src='" + data.data[0].url + "'/><i class='ti-trash'  onclick=\"delImg(this)\"></i></li>"

					$("#img4").html(html);
					$("[name='pro_pic_url']").val(data.data[0].url);

				}
				else {
					Toast.error(data.errmsg);
				}
			},
			'onSelect': function(queue) {}
		});

	});

	var specification = {{ goods.specification | stringify | safe }};
	var product = {{ goods.product | stringify | safe }};
	var productTemp = {{ goods.product | stringify | safe }};
	var specificationArr = {{ specificationArr | stringify | safe }};

	function addspec(t) {
		var dialog = $("#dialogSpecification");
		dialog.modal("show");
		dialog.find("#ok").unbind("click");
		var index = -1;
		if(t) {
			index = $(t).parents("tr").index();
		}
		console.log(index);
		if(index >= 0) {
			console.log(index)
			dialog.find("#spec_id").val(specification[index].specification_id);
			dialog.find("#spec_value").val(specification[index].value);
			dialog.find("#pic_url").val(specification[index].pic_url);
			console.log(dialog.find("#pic_url").val());
			if(specification[index].pic_url) {
				var html = "<li><img src='" + specification[index].pic_url + "'/><i class='ti-trash'  onclick=\"delImg(this)\"></i></li>"
				$("#img3").html(html);

			}

		}

		dialog.find("#ok").bind("click", function(event) {
			var btn = $(this);
			var spec_id = Number(dialog.find("#spec_id").val());
			var spec_value = dialog.find("#spec_value").val();
			var spec_pic = dialog.find("#pic_url").val();

			console.log(specification);
			if(!spec_id || !spec_value) {
				return Toast.error("请填写完整的规格信息");
			}
			var spec_name = "";
			for(var i = 0; i < specificationArr.length; i++) {
				if(specificationArr[i].id == spec_id) {
					spec_name = specificationArr[i].name;
					break;
				}
			}
			var img = ""
			if(spec_pic) {
				img = '<img src="' + spec_pic + '" alt="" onclick=\'sublime.picture("' + spec_pic + '")\'/>';
			};
			var html = '<td>' + spec_name + '</td><td>' + spec_value + '</td><td class="img">' + img + '</td><td>' +
				'<div class="btn-group"><button type="button" class="btn btn-default btn-xs dropdown-toggle" data-toggle="dropdown">' +
				' <i class="ti-settings"></i> <span class="ti-angle-down"></span></button><ul class="dropdown-menu" role="menu">' +
				'<li><a href="javascript:;" onclick="addspec(this)">编辑</a></li>' +
				'<li><a href="javascript:;" onclick="del(this)">删除</a></li>' +

				'</ul></div>' +

				'</td>';

			if(index >= 0) {
				specification[index] = {
					specification_id: spec_id,
					value: spec_value,
					pic_url: spec_pic
				};

				$("#specification tbody tr").eq(index).html(html);

			} else {
				specification.push({
					specification_id: spec_id,
					value: spec_value,
					pic_url: spec_pic
				});

				$("#specification tbody").append('<tr>' + html + '</tr>');
			}

			changePro(specification);

			dialog.modal("hide");
		});
	}

	function changePro(specification) {
		var prospecs = proSpec(specification);

		product = [];
		var prohtml = "";

		for(var i in prospecs) {

			var flag = -1;
			for(var x = 0; x < productTemp.length; x++) {
				console.log(JSON.stringify(productTemp[x].specification_value) +"======="+ JSON.stringify(prospecs[i]))
				if(JSON.stringify(productTemp[x].specification_value) == JSON.stringify(prospecs[i])) {
					flag = x;
					break;
				}
			}
			var btn = "";
			for(var x in prospecs[i]) {
				btn += '<a class="btn btn-primary btn-xs mr5">' + prospecs[i][x].value + '</a>'
			}
			
			console.log("flag:"+flag);
			
			if(flag > -1) {
				product.push(productTemp[flag]);
				var img = ""
				if(productTemp[flag].pic_url) {
					img = '<img src="' + productTemp[flag].pic_url + '" alt="" onclick=\'sublime.picture("' + productTemp[flag].pic_url + '")\'/>';
				}
				prohtml += '<tr><td>' + btn + '</td><td>' + productTemp[flag].goods_number + '</td><td>' + productTemp[flag].retail_price + '</td><td class="img">' + img + '</td><td>' +
					'<a href="javascript:;" onclick="setPro(this)" class="btn btn-default btn-xs">设置</a>' +

					'</td></tr>';
			} else {
				product.push({

					specification_value: prospecs[i],
					goods_number: 0,
					retail_price: 0,
					pic_url: ""
				});

				prohtml += '<tr><td>' + btn + '</td><td>' + 0 + '</td><td>' + 0 + '</td><td class="img"></td><td>' +
					'<a href="javascript:;" onclick="setPro(this)" class="btn btn-default btn-xs">设置</a>' +

					'</td></tr>';

			}

		}

		$("#product tbody").html(prohtml);
	}

	function setPro(t) {
		var dialog = $("#dialogProduct");
		dialog.modal("show");
		dialog.find("#ok").unbind("click");
		var index = -1;
		if(t) {
			index = $(t).parents("tr").index();
		}
		console.log(index);
		var btn = "";
		if(index >= 0) {
			dialog.find("#pro_num").val(product[index].goods_number);
			dialog.find("#pro_price").val(product[index].retail_price);
			dialog.find("#pro_pic_url").val(product[index].pic_url);

			for(var x in product[index].specification_value) {
				btn += '<a class="btn btn-primary btn-xs mr5">' + product[index].specification_value[x].value + '</a>'
			}
			dialog.find("#pro_spec").html(btn);

			if(product[index].pro_pic_url) {
				var html = "<li><img src='" + product[index].pic_url + "'/><i class='ti-trash'  onclick=\"delImg(this)\"></i></li>"
				$("#img4").html(html);

			}

		}

		dialog.find("#ok").bind("click", function(event) {
			var bt = $(this);
			var pro_num = dialog.find("#pro_num").val();
			var pro_price = dialog.find("#pro_price").val();
			var pro_pic_url = dialog.find("#pro_pic_url").val();

			if(!pro_num || !pro_price) {
				return Toast.error("请填写完整的库存信息");
			}

			var img = ""
			if(pro_pic_url) {
				img = '<img src="' + pro_pic_url + '" alt="" onclick=\'sublime.picture("' + pro_pic_url + '")\'/>';
			};
			var html = '<td>' + btn + '</td><td>' + pro_num + '</td><td>' + pro_price + '</td><td class="img">' + img + '</td><td>' +
				'<a href="javascript:;" onclick="setPro(this)" class="btn btn-default btn-xs">设置</a>' +

				'</td>';

			if(index >= 0) {
				product[index].goods_number = pro_num;
				product[index].retail_price = pro_price;
				product[index].pic_url = pro_pic_url;

			};

			$("#product tbody tr").eq(index).html(html);
			console.log(product);
			dialog.modal("hide");
		});

	}

	function del(t) {

		var index = $(t).parents("tr").index();
		specification.splice(index, 1);
		$(t).parents("tr").remove();
		changePro(specification);

	}

	function cartesian(array) {
		console.log("99999")
		console.log(array)

		if(array.length < 2) {
			var arr = [];
			for(var i in array[0]) {
				arr.push([array[0][i]]);
			}
			return arr;

		};
		return [].reduce.call(array, function(col, set) {
			var res = [];
			col.forEach(function(c) {
				set.forEach(function(s) {
					var t = [].concat(Array.isArray(c) ? c : [c]);
					t.push(s);
					res.push(t);
				})
			});
			return res;
		});
	}

	function unique(array) {
		var temp = [];
		var index = [];
		var l = array.length;
		for(var i = 0; i < l; i++) {
			for(var j = i + 1; j < l; j++) {
				if(array[i] === array[j]) {
					i++;
					j = i;
				}
			}
			temp.push(array[i]);
			index.push(i);
		}
		return temp;
	}

	function proSpec(specification) {
		var specArray = [];
		var specUnit = [];

		for(var i = 0; i < specification.length; i++) {
			specUnit.push(specification[i].specification_id);
		}
		console.log(specUnit);
		var ids = unique(specUnit);
		console.log(ids);
		for(var i = 0; i < ids.length; i++) {
			var specArr = [];
			for(var x = 0; x < specification.length; x++) {
				if(specification[x].specification_id == ids[i]) {

					specArr.push({ id: specification[x].specification_id, value: specification[x].value });

				}
			}
			specArray.push(specArr);

		}

		return cartesian(specArray);
	}
</script>
{% endblock %}